<template>
  <div class="cart">
    <div class="w-1200">
      <div class="top-next">
        <router-link to="/" class="next">继续购物</router-link>
        <router-link to="#" class="close">去结算</router-link>
      </div>
      <div class="cart-box">
        <div class="hd">
          <span><input type="checkbox" v-model="checked" @click="checkedAll"></span>
          <span class="text1"> 全选</span>
          <span class="text2">单价</span>
          <span class="text2">数量</span>
          <span class="text2">小计</span>
        </div>

        <div class="p-list">
          <ul>
            <li class="list-item"  v-for="i in cartList" :key="i.pid">
              <div class="checkbox">
                <input type="checkbox" v-model="checkList" :value="i">
              </div>
              <div class="item-img">
                <img :src="i.img">
              </div>
              <div class="title" @click="toDetails(i.pid)">{{i.title1}}</div>
              <div class="item-price">¥{{Number(i.price*0.8).toFixed(2)}}</div>
              <div class="nums">
                <button class="minus" @click="reduceNum(i.pid)">-</button>
                <span>{{i.count}}</span>
                <button class="add" @click="addNum(i.pid)">+</button>
              </div>
              <div class="item-xj">¥{{Number(i.price*0.8*i.count).toFixed(2)}}</div>
              <div class="del" @click="removeItem(i.pid)">删除</div>
            </li>

          </ul>
        </div>
        <div class="fd">
          <div class="f-left">
            <p class="removecart" @click="removeCartAll">清空购物车</p>
           
            <p>
              <router-link to="/" class="next">继续购物</router-link>
            </p>
          </div>
          <div class="f-right">
            <p class="p2">
              <span><span style="color:red"> {{cartcount}} </span>件商品,总价:</span>
              <span class="f-price">¥ {{getTotal}}</span>
            </p>
            <p>
              <router-link to="#" class="close">去结算</router-link>
            </p>
          </div>
        </div>
      </div>      
    </div>

  </div>
</template>

<script>
import { mapMutations,mapGetters,mapState } from 'vuex'
export default {
  data(){
    return {
      count:1,
      checkList:[],
      total:0,
      checked:false,
      count3:0,
    }
  },
  methods:{
    //结构 将 store 的函数映射到 当前组件内
    ...mapMutations(['_addNum','_reduceNum','_removeCartItem',"_removeCartAll"]),
    //添加数量
    addNum(pid){
      this._addNum(pid)
    },
    // 减少数量
    reduceNum(pid){
      this._reduceNum(pid)
    },
     // 删除
    removeItem(pid){
      this._removeCartItem(pid)
    }, 
    removeCartAll(){
      this._removeCartAll();
      this.$router.go(0)
    },
    // 全选
    checkedAll(){
      if(this.checked){
          this.checkList = []
      }else{
          this.checkList = this._getCartList
      }
    },
    // 结算
    calc(){
      console.log(this.checkList)
    },

    toDetails(pid){
      this.$router.push(`/details/${pid}`)
    }
  },
  computed:{
    // 导入 用户点击添加进入购物车的数据 
    ...mapGetters(['_getCartList']),
    ...mapState(['count2']),

    cartList(){
        return this._getCartList
    },
    cartcount(){
        return this.count2
        console.log(this.count2)
    },
    // 总计
    getTotal(){
      // 计算 checkList 并 计算求和
      this.total = this.checkList.reduce((acc,cur)=>{
          return acc + cur.price*cur.count
      },0)
      return this.total
    } 
  },
  watch:{ // 监听 checkList 全选
      checkList:function(){
        if(this._getCartList.length == this.checkList.length){
            this.checked = true
        }else{
            this.checked = false
        }
      }
    }
}
</script>

<style scoped>
.cart .p-list .item-price{
  margin-left: 75px;
  width:62px;
}
.cart .p-list .item-xj{
  margin-left: 68px;
  width: 68px;
}
.cart .p-list .nums{
  margin-left: 70px;
  width: 95px;
}
.cart .p-list .nums span{
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 4px 10px;
}
.cart .p-list .nums input{
  width: 50px;
  border: 1px solid #e8e8e8;
  height: 22px;
  outline: 0;
  text-align: center;
  border-left: 0;
  border-right: 0;
}
.cart .p-list .nums .minus, .cart .p-list .nums .add{
  width: 24px;
  height: 26px;
  border: 1px solid #e8e8e8;
  display: inline-block;
  line-height: 22px;
  background-color: #e8e8e8;
  cursor: pointer;
}
.cart .p-list .nums .minus:hover, .cart .p-list .nums .add:hover{
  background-color: #fff;
}
.cart .list-item .del{
  margin-left: 150px;
  cursor: pointer;
}
.cart .list-item .del:hover, .cart .p-list .title:hover{
  text-decoration:underline;
}
.cart .p-list{
  background-color: #fff;
}
.cart .list-item{
  display: flex;
  padding: 5px 10px;
  line-height: 62px;
  font-size: 14px;
  color: #666;
}
.cart .p-list .item-img{
  width: 62px;
  height: 62px;
  margin-left: 10px;
}
.cart .p-list .item-img img{
  width: 100%;
  border: 1px solid #eee;
}
.cart .p-list .title{
  width: 298px;
  font-size: 12px;
  color: #666;
  line-height: 18px;
  text-align: left;
  margin: 10px;
  cursor: pointer;
}
.cart .cart-box{
  margin-top: 15px;
}
.cart .cart-box .hd{
  background-color: #fff;
  text-align: left;
  padding: 30px 0 15px 10px;
  font-size: 14px;
  color: #111;
  border-bottom: 1px solid #e4e4e4;
}

.cart .cart-box .hd .text1{
  margin-right: 450px;
}
.cart .cart-box .hd .text2{
  margin-right: 120px;
}
.cart .cart-box .fd{
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.fd{
  font-size: 12px;
  color: #111;
}
.fd .removecart{
  margin-left: -45px;
  cursor: pointer;
}
.fd .removecart:hover{
  color: ;
}
.fd .p2{
  margin-left: 25px;
}
.fd .next{
  margin-top: 20px;
  padding: 10px 15px !important;
  font-size: 14px !important;
}
.fd .next:hover{
  background-color: #e5e5e5;
}
.fd .close{
  color: #fff;
  background-color: #e73736;
  border: 1px solid #e73736;
  margin-top: 20px;
  width: 75px;
  margin-left: 38px;
  padding: 10px !important;
  font-size: 14px !important;
}
.fd .close:hover,.cart .top-next .close:hover{
  background-color: #f00;
}
.fd .f-price{
  color: #e73736;
  font-size: 20px;
}

.cart {
  background-color: #f8f8f8;
  padding: 30px 0 50px 0;
}
.w-1200{
  width: 1200px;
  margin: 0 auto;
}
.cart .top-next{
  display: flex;
  justify-content: flex-end;
}
.cart .top-next .next, .cart .top-next .close,.fd .close,.fd .next{
  display: block;
  font-size: 12px;
  padding: 5px 13px;
  height: 16px;
  line-height: 16px;
  border-radius: 3px;
}
.cart .top-next .next,.fd .next{
  margin-right: 20px;
  background-image:linear-gradient(#f8f8f8,#e5e5e5);
  color: #666;
  border: 1px solid #c4c4c4;
}
.cart .top-next .next:hover,.fd .next:hover{
  background-image:linear-gradient(#e5e5e5,#e5e5e5);
}
.cart .top-next .close{
  color: #fff;
  background-color: #e73736;
  border: 1px solid #e73736;
}
</style>